<template>
  <div class="login-container">
    <div class="login_bg">
      <a-form
        :model="formState"
        name="normal_login"
        class="login-form"
        @finishFailed="onFinishFailed"
      >
        <h1>聚合搜索-登录</h1>
        <br />
        <a-form-item
          label="用户名"
          name="username"
          :rules="[{ required: true, message: 'Please input your username!' }]"
        >
          <a-input v-model:value="formState.username">
            <template #prefix>
              <UserOutlined class="site-form-item-icon" />
            </template>
          </a-input>
        </a-form-item>

        <a-form-item
          label="密&emsp;码"
          name="password"
          :rules="[{ required: true, message: 'Please input your password!' }]"
        >
          <a-input-password v-model:value="formState.password">
            <template #prefix>
              <LockOutlined class="site-form-item-icon" />
            </template>
          </a-input-password>
        </a-form-item>
<!--        <a-form-item v-bind="validateInfos.validate" label="验证码">-->
<!--          <a-input-->
<!--            class="inputBox"-->
<!--            style="height: 45px"-->
<!--            v-model:value="formState.validate"-->
<!--            placeholder="Captcha"-->
<!--          >-->
<!--            <template #prefix>-->
<!--              <PictureOutlined style="color: rgba(0, 0, 0, 0.25)" />-->
<!--            </template>-->
<!--            <template #addonAfter>-->
<!--              <img @click="UpdateValidate" :src="captcha" height="30" />-->
<!--            </template>-->
<!--          </a-input>-->
<!--        </a-form-item>-->
        <a-form-item >
          <a-form-item name="remember" no-style style="width:345px;display: flex;justify-content: space-between;">
            <a-checkbox v-model:checked="formState.remember"
              >记住密码
            </a-checkbox>
            <span class="login-form-forgot">没有账号？<a @click="gotoRegister">点此注册</a></span>
          </a-form-item>
<!--          <a href="">register now!</a>-->
          <!--        <a class="login-form-forgot" href="">Forgot password</a>-->
        </a-form-item>

        <a-form-item>
          <a-button
            :disabled="disabled"
            type="primary"
            html-type="submit"
            class="login-form-button"
            style="width: 345px;"
            @click="onSubmit"
          >
            登录
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, reactive, ref, toRaw } from "vue";
import {
  LockOutlined,
  PictureOutlined,
  UserOutlined,
} from "@ant-design/icons-vue";
import { Form, message } from "ant-design-vue";
import myAxios from "@/plugins/myAxios";
import router from "@/router";




const rulesRef = reactive({
  username: [
    {
      required: true,
      message: "Please input username",
    },
  ],
  password: [
    {
      required: true,
      message: "Please input password",
    },
  ],
  // validate: [
  //   {
  //     required: true,
  //     message: "Please input validate",
  //   },
  // ],
});
interface FormState {
  username: string;
  password: string;
  validate: string;
  remember: boolean;
}

const formState = reactive<FormState>({
  username: "",
  password: "",
  validate: "",
  remember: true,
});


const useForm = Form.useForm;
const { validate, validateInfos } = useForm(formState, rulesRef);

let captcha = ref("");
const UpdateValidate = () => {
  captcha = ref(myAxios.defaults.baseURL + "captcha");
};
UpdateValidate();
// const onFinish = (values: any) => {
//   console.log("Success:", values);
// };

const onFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo);
};
const disabled = computed(() => {
  return !(formState.username && formState.password);
});

const gotoRegister = () => {
  router.push("/register");
};

const onSubmit = () => {
  validate()
    .then(() => {
      if (formState.username === "" || formState.password === "") {
        message.error(
          `请将${formState.username === "" ? "账号" : ""}${
            formState.password === "" ? "密码" : ""
          }填写完整`
        );
      }
      else {
        login(formState)
      }
    })
};

const login = (form: FormState) => {
  const Query = {
    userAccount: form.username,
    userPassword: form.password,
  };
  myAxios.post("/user/login", Query).then((res: any) => {
    console.log(res);
    if (res !== null) {
      console.log(res);
      localStorage.setItem("isLogin","true");
      localStorage.setItem("id",res.id);
      localStorage.setItem("userRole",res.userRole);
      message.success("登录成功");
      router.push("/search/post");
    }
  });
};

</script>
<style scoped lang="less">
.login_bg {
  width: 565px;
  height: 372px+65px;
  padding: 40px 110px;
  /*background: url("@/assets/login_left4.png");*/
  background-color: #d9d9d9;
  opacity: 0.6;
  border-radius: 20px;
  border: #d9d9d9 solid 1px ;
}

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
  background-image: url('/background.svg');
  //background: linear-gradient(to bottom, blue, pink);
}

#components-form-demo-normal-login .login-form {
  max-width: 300px;
}

#components-form-demo-normal-login .login-form-forgot {
  float: right;
}

#components-form-demo-normal-login .login-form-button {
  width: 3000px;
}
</style>
